<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/css/arrow-box.css" />

    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj"
        href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>高亮 item 效果</h2>
                <p>简单设置底边颜色不同即可。注意这里要使用 js 类：</p>

                <pre class="prettyprint">new FocusHandler(document.querySelector('.tab'));</pre>

                <p>演示：</p>
                <ul class="tab" style="width:80%;">
                    <li class="active">验证</li>
                    <li>核对</li>
                    <li>支付</li>
                </ul>

                <br />
                <br />

                <p>上例为各个 item 等分宽度，如果不是等分（如下例子），则要设置 ul 底部边框， item 的底边要
                    margin-bottom: -Xpx; X 是边框宽度，而且 ul、li 的高度要设置。</p>
                <style>
                    ul.tab2 {
                        border-bottom: 3px solid lightgray;
                        width: 80%;
                        height: 30px;
                    }

                    ul.tab2 li {
                        width: 20%;
                        margin-bottom: -3px;
                        float: left;
                        text-align: center;
                        cursor: pointer;
                        height: 30px;
                        line-height: 30px;
                        letter-spacing: 6px;
                    }

                    ul.tab2 li.active {
                        border-bottom: 3px solid #0084C9;
                        color: #0084C9;
                    }
                </style>


                <ul class="center tab2" style="width:96%;">
                    <li class="active">公开课</li>
                    <li>直播课</li>
                </ul>

                <script>
                    // 用户点击 UI，UI 得到一个状态，以表示与其他组件不同，例如 tab 下面多个 items 点击状态
                    function FocusHandler(el) {
                        el.onclick = this.click.bind(this);
                        this.items = el.querySelectorAll('li');
                    }

                    FocusHandler.prototype = {
                        itemTag: 'li',
                        activeClassName: 'active',
                        click: function (e) {
                            var li = e.target, items = this.items;
                            var index;
                            for (var i = 0, j = items.length; i < j; i++) {
                                if (items[i] == li) {
                                    index = i;
                                    items[i].classList.add(this.activeClassName);
                                } else
                                    items[i].classList.remove(this.activeClassName);
                            }

                            this.onClick && this.onClick(li, index);// 点击的 item 和索引
                        }
                    }

                    new FocusHandler(document.querySelector('.tab'));
                    new FocusHandler(document.querySelector('.tab2'));
                </script>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
</body>

</html>